satisfies operator
V satisfies Tと書いた時、
V: Tを満たすかどうかをチェックしつつ、
V自身の型推論を採用する
classにおけるimplementsと同じ発想
このrecordに型をつけることを考える
code:ts
const palette = {
green: "#00ff00",
}
従来だと2通りの型の付け方があった
code:ts
type Colors = "red" | "green" | "blue";
const palette: Record<Colors, string | RGB> = {
green: "#00ff00",
};
keyのtypoは検出できる
しかし、valueの型が全てstring|RGBになるので適切でない
code:ts
const palette = {
green: "#00ff00",
} as const;
valueの差異は推論してくれる
しかし、keyにルールを課せないのでtypoしたまま気付けない
satisfiesを使うことで解決する
code:ts
type Colors = "red" | "green" | "blue";
const palette = {
green: "#00ff00",
} satisfies Record<Colors, string | RGB>; // これ
paletteが、Record<...>を満たすかどうかcheckしつつ、
paletteは以下の型に推論される
code:ts
type Palette = {
green: string;
bleu: number[];
}
Record<string, string>で雑に型を付ける時も従来より便利になった
従来: 型推論がしょぼくなる
https://gyazo.com/b9a21fe37a1e65ec8b4786af94cddb01 https://www.typescriptlang.org/play?ts=4.9.4#code/MYewdgzgLgBADgQwDYFMpRQLhgJRaAJwBMAeaAgSzAHMAacq6gPhgF4YBvAKBhgHo+MAHoB+HjAIoi2AEQBiAGYKADKuUza46pJRhZc1UtUbxAIyQBXLDHlrlSk7wDuACwoZsARlW1efgTAoBAQgBFwAvlxcQA
satisfies
ちゃんと推論してくれるので補完できる
https://gyazo.com/522ec5b2f9e1bc626ba3d6e214bc5dae https://www.typescriptlang.org/play?ts=4.9.4#code/MYewdgzgLgBADgQwDYFMpRTAvDA3gKBhgHpiYA9AfkJgCcUATALhgCIBiAM04AY+fWAGhoBzeijAsOfbnyE0ARkgCuKKe349u8ogHcAFgEsMLAIx9BRK6RgpatELXwBfGBARRDEToZQQYAEoooLQMADzQtIZgIoKR0SIAfPj4QA
https://gyazo.com/da086e2cff3df1c2692d0364a9d696ca https://www.typescriptlang.org/play?ts=4.9.4#code/MYewdgzgLgBADgQwDYFMpRTAvDA3gKBhgHpiYA9AfkJgCcUATALhgCIBiAM04AY+fWAGhoBzeijAsOfbnyE0ARkgCuKKe349u8gL4wEEGKEiwICKAEsInCykMAlFKFoMAPNFoWwIwR68iAPnx8IA
他の実用例はこの記事が良かった
recordに対してしか使えない？
そんなことはないmrsekut.icon
タプルに対して使う例
code:ts
type Option = { type: 'a' } | { type: 'b' } | { type: 'c' };
普通にopstions: Type[]で型付けすると、['a','a','a']なども許容してしまう
as constすると、['a','b','hoge']のように誤字ったときに検出できない
['a', 'b', 'c']というタプルがほしい